<template>
  <div class="body">
    <nut-navbar @on-click-back="$router.back()" :rightShow="false">活动分享——{{activityData.activity_title}}</nut-navbar>
    <div class="container">
      <div class="img row">
        <!--<img class="w-100" src="../../assets/icon/icon-banner.jpg" />-->
        <img class="w-100" :src="img" />
        <router-link class="float text-center c-yellow" :to="`/details?activityId=${activityId}`">活动详情</router-link>
      </div>
      <div class="info dis-flex just-con-s-b m-t-20 text-left w-100 p-b-20">
        <div class="left">
          <div class="line c-yellow dis-flex" v-if="activityData.activity_info">
            <div class="title flex-sh-0">活动说明：</div>
            <div class="line-clamp-2">{{activityData.activity_info}}</div>
          </div>
          <div class="line dis-flex" v-if="activityData.room_leader">
            <div class="title flex-sh-0">活动接待：</div>
            <div class="nowrap-ellipsis">{{activityData.activity_leader}}</div>
          </div>
          <div class="line dis-flex" v-if="activityData.phone">
            <div class="title flex-sh-0">接待电话：</div>
            <a class="dis-block nowrap-ellipsis c-blue" :href="`tel:${activityData.phone}`">
              {{activityData.phone}}
            </a>
          </div>
          <div class="line dis-flex" v-if="activityData.address">
            <div class="title flex-sh-0">活动地址：</div>
            <div class="nowrap-ellipsis">{{activityData.address}}</div>
          </div>
          <div class="line dis-flex" v-if="activityData.traffic">
            <div class="title flex-sh-0">交通指引：</div>
            <div class="line-clamp-2">{{activityData.traffic}}</div>
          </div>
        </div>
        <div class="right flex-sh-0">
          <div class="img">
            <img class="w-100 h-100" :src="url" />
          </div>
          <div class="text text-center f-s-12 c-fff">订房或报名请长按二维码</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import wx from "weixin-js-sdk"
  import { wxInit } from '../../utils/weixin-init'
  import QRCode from 'qrcode'
  import { getDetailsByIdApi } from '../../api/record'
  import { IconUrl } from '../../utils/auxiliary'

  export default {
    data () {
      return {
        activityId: '',
        activityData: {},
        url: '',
        img: ''
      }
    },
    computed: {
      ...mapGetters([ 'host', 'shareReady' ])
    },
    async mounted () {
      this.activityId = this.$route.query.activityId
      if (!/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent) || !this.shareReady) {
        await wxInit()
      }
      this.getData()
    },
    methods: {
      async getData () {
        const { activityById: activityData } = await getDetailsByIdApi({ activityId: this.activityId })
        this.activityData = activityData
        const imgUrl = IconUrl(`${activityData.activity_icon}`)
        const _this = this

        wx.ready(function() {
          wx.updateAppMessageShareData({
            title: '在线报名—' + activityData.activity_title, // 分享标题
            desc: activityData.activity_info,
            link: 'http://' + _this.host + '/share?activityId=' + _this.activityId, // 分享链接,将当前登录用户转为puid,以便于发展下线
            imgUrl: imgUrl,
            success: function () {
              console.log(imgUrl);
              console.log(activityData.activity_title);
              console.log(activityData.activity_info);
            }
          })
          wx.updateTimelineShareData({
            title: '在线报名—' + activityData.activity_title, // 分享标题
            desc: activityData.activity_info,
            link: 'http://' + _this.host + '/share?activityId=' + _this.activityId, // 分享链接,将当前登录用户转为puid,以便于发展下线
            imgUrl: imgUrl,
            success: function () {
              console.log(imgUrl);
              console.log(activityData.activity_title);
              console.log(activityData.activity_info);
            }
          })
        })
        this.img = IconUrl(activityData.activity_icon)
        const url = `${window.location.origin}/reserve?activityId=${this.activityId}`
        const res = await QRCode.toDataURL(url)
        this.url = res
      }
    }
  }
</script>

<style scoped lang="scss">
  .container {
    overflow: visible;
  }
  .img {
    min-height: 200px;
    position: relative;
    .float {
      position: absolute;
      top: 30px;
      right: 0;
      padding: 5px 10px;
      background: #1C1C1B;
      border-top-left-radius: 15px;
      border-bottom-left-radius: 15px;
    }
  }
  .info {
    .left {
      width: calc(100vw - 110px);
      .line {
        .title {
          width: 65px;
        }
      }
    }
    .right {
      .img {
        width: 80px;
        height: 80px;
        min-height: auto;
      }
      .text {
        width: 80px;
        background-color: red;
      }
    }
  }
</style>
